<template>
  <div v-if="shopInfo" class="shop">
    <!-- 头部 -->
    <nav class="header-nav">
      <div class="nav_bg">
        <img v-lazy="shopInfo.rst.shop_sign.image_hash" alt>
      </div>
      <div class="nav_back">
        <i class="fa fa-chevron-left" @click="$router.push('/home')" />
      </div>
      <div class="shop_image">

        <img v-lazy="shopInfo.rst.image_path" alt>
      </div>
    </nav>

    <!-- 商家信息 -->
    <div class="index-rst">
      <div class="rst-name">
        <span @click="showInfoModel = true">{{ shopInfo.rst.name }}</span>
        <i class="fa fa-caret-right" />
      </div>
      <!-- 弹窗信息 -->
      <InfoModel :rst="shopInfo.rst" :show-info-model="showInfoModel" @close="showInfoModel = false" />

      <!-- 评分月售 -->
      <div class="rst-order">
        <span>评分{{ shopInfo.rst.rating }}</span>
        <span>月售{{ shopInfo.rst.recent_order_num }}单</span>
        <span>蜂鸟专送约{{ shopInfo.rst.order_lead_time }}分钟</span>
      </div>
      <!-- 优惠信息 -->
      <Activity :activities="shopInfo.rst.activities" />

      <!-- 公告 -->
      <p class="rst-promotion">公告: {{ shopInfo.rst.promotion_info }}</p>
    </div>

    <!-- 导航 -->
    <NavBar />
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import InfoModel from '../../components/Shops/InfoModel'
import Activity from '../../components/Shops/Activity'
import NavBar from '../../components/Shops/NavBar'

export default {
  name: 'Shop',
  components: {
    InfoModel,
    Activity,
    NavBar
  },
  data() {
    return {
      shopInfo: null,
      showInfoModel: false
    }
  },
  created() {
    this.getData()
  },

  methods: {
    getData() {
      this.$axios('/api/goods.json').then(res => {
        // console.log(res.data);
        this.shopInfo = res.data
      })
    }
  }
}
</script>

<style scoped>
.shop {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.header-nav {
  position: relative;
}
.nav_bg img {
  width: 100%;
  height: 26.666667vw;
}
.nav_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26.666667vw;
      background-image: linear-gradient(0deg,hsla(0,0%,100%,0),rgba(0,0,0,.5));

}
.nav_back i {
  color: #fff;
  font-size: 1.3rem;
  margin-left: 2.333333vw;
    margin-top: 2.333333vw;
}
.shop_image {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -10vw;
  margin-top: 11vw;
}
.shop_image img {
  width: 20vw;
  height: 20vw;
  border-radius: 0.8vw;
}

.index-rst {
  padding: 8vw 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  box-shadow: inset 0 -0.666667vw 0.666667vw hsla;
}
.index-rst .rst-name {
  flex: 1;
  width: 72vw;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  padding-right: 2.666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.6vw 0;
}
.rst-name span {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-rst .rst-order {
  white-space: nowrap;
  height: 3.2vw;
  margin-top: 1.733333vw;
  color: #666;
  text-align: center;
  font-size: 0.6rem;
}
.rst-order span {
  margin: 0 3px;
}
.index-rst .rst-promotion {
  width: 80vw;
  font-size: 0.6rem;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2.266667vw auto 2.666667vw;
  padding: 0;
  white-space: nowrap;
}
</style>
